<template>
	<el-dialog v-model="dialogFormVisible" title='编辑管理员信息' width="600px" align-center draggable>
		<div class="dialog-content">
			<el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px">
				<el-form-item label="账号" prop="account">
					<el-input v-model="formData.account" disabled />
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="formData.name" />
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select v-model="formData.sex" placeholder="请选择性别">
						<el-option label="男" value="男" />
						<el-option label="女" value="女" />
					</el-select>
				</el-form-item>
				<el-form-item label="身份" prop="identity">
                    <el-select v-model="formData.identity" placeholder="请选择身份" v-if="formData.identity == '超级管理员' || formData.identity == '院领导'">
                        <el-option label="超级管理员" value="超级管理员" />
                        <el-option label="院领导" value="院领导" />
                    </el-select>
                    <el-select v-model="formData.identity" placeholder="请选择身份" v-else-if="formData.identity == '管理员' || formData.identity == '辅导员' || formData.identity == '审核小组'">
                        <el-option label="管理员" value="管理员" />
                        <el-option label="辅导员" value="辅导员" />
                        <el-option label="审核小组" value="审核小组" />
                    </el-select>
                </el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="formData.email" />
				</el-form-item>
				<el-form-item label="部门" prop="department">
					<el-select v-model="formData.department" placeholder="请选择部门">
						<el-option v-for="(item,index) in departmentData" :label="item" :value="item" :key="index"/>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="edit">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, onBeforeUnmount } from 'vue'
import {
	bus
} from "@/utils/mitt.js"
import {
	getUserInfo, editAdmin
} from '@/api/userinfo.js'
import {getDepartment } from '@/api/setting'
import { ElMessage } from 'element-plus'

//根据传递的ID回显数据
bus.on('editId', async (id: number) => {
	Object.keys(formData).forEach((key) => {
        formData[key] = null;
    });
	const res = await getUserInfo(id)
	formData.id = res.data.results.ID
	formData.account = res.data.results.account
	formData.name = res.data.results.name
	formData.sex = res.data.results.sex
	formData.email = res.data.results.email
	formData.department = res.data.results.department
	formData.identity = res.data.results.identity
	console.log(formData.identity)
})

// 部门数据
const departmentData = ref([])
const returnDepartment = async () => {
	const res = await getDepartment()
	departmentData.value = res.data
}
returnDepartment()
//编辑管理员信息接口
interface formData {
	id?: number,
	account: number,
	name: string,
	sex: string,
	email: string,
	department: string,
	identity: string
}
//编辑管理员信息
const formData: formData = reactive({
	id: null,
	account: null,
	name: '',
	sex: '',
	email: '',
	department: '',
	identity: ''
})
//表单验证
const rules = reactive({
	account: [
		{ required: true, message: '请输入管理员的注册账号', trigger: 'blur' },
	],
	name: [
		{ required: true, message: '请输入管理员的名字', trigger: 'blur' },
	],
	sex: [
		{ required: true, message: '请输入管理员的性别', trigger: 'blur' },
	],
	email: [
		{ required: true, message: '请输入管理员的邮箱', trigger: 'blur' },
	],
	department: [
		{ required: true, message: '请输入管理员的部门', trigger: 'blur' },
	],
})
//编辑管理员信息方法
const edit = async () => {
	const res = await editAdmin(formData)
	console.log(formData)
	if (res.data.status === 0) {
		ElMessage({
			message: '编辑管理员信息成功',
			type: 'success',
		})
		dialogFormVisible.value = false
		bus.emit('offDialog',2)
	} else {
		ElMessage.error('编辑管理员信息失败')
		dialogFormVisible.value = false
	}
}

// 弹窗开关
const dialogFormVisible = ref(false)

// 打开编辑管理员的弹窗
const open = () => {
	dialogFormVisible.value = true
}

defineExpose({
	open
})

onBeforeUnmount(() => {
	bus.all.clear()
})
</script>

<style lang="scss" scoped>
.dialog-content {
	display: flex;
	padding: 20px 30px;
}

:deep(.el-form-item) {
	margin: 30px;
}
</style>